<template>
  <div class="ac-wrap" >
    <!-- <div class="titles">
      查询
    </div> -->
    <div class="sel">
        <span class="txt">活动名称</span>
        <el-input  type="text" placeholder="活动名称" v-model="params.keyWord"></el-input>
        <span class="txt">活动时间</span>
         <el-date-picker 
      v-model="params.startTime"
      type="date"
      placeholder="选择开始日期">
    </el-date-picker>
    <el-date-picker 
      v-model="params.endTime"
      type="date"
      placeholder="选择结束日期">
    </el-date-picker>
      <span class="txt">活动状态</span>
      <el-select  placeholder="请选择活动状态" v-model="changeStates">
        <el-option label="请选择" value="0">请选择</el-option>
        <el-option label="待合作" value="1">待合作 </el-option>
        <el-option label="待审核" value="2">待审核</el-option>
        <el-option label="待报名" value="4">待报名</el-option>
        <el-option label="已成团" value="5">已成团 </el-option>
        <el-option label="待签到" value="6">待签到</el-option>
        <el-option label="已结束" value="7">已结束 </el-option>
        <el-option label="已驳回" value="3">已驳回 </el-option>
        <el-option label="已关闭" value="8">已关闭</el-option>
      </el-select>
        <div class="sel-btn" @click="getAcList(changeStates)">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="ac-tabs">
      <div :class="states == 0 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(0)">
        全部
      </div>
      <div :class="states == 1 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(1)">
        待合作
      </div>
      <div :class="states == 2 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(2)">
        待审核
      </div>
      <div :class="states == 4 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(4)">
        待报名
      </div>
      <div :class="states == 5 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(5)">
        已成团
      </div>
      <div :class="states == 6 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(6)">
        待签到
      </div>
      <div :class="states == 7 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(7)">
        已结束
      </div>
      <div :class="states == 3 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(3)">
        已驳回
      </div>
      <div :class="states == 8 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(8)">
        已关闭
      </div>
    </div>
  <el-table :data="acList" stripe style="width: 100%">
      <el-table-column prop="serviceName" width="200" align="center" label="活动海报">
        <template slot-scope="scope">
          <div>
            <img
              :src="scope.row.activity_img"
              :style="{
            maxWidth: '100%',
            maxHeight: '100px',
            padding:'5px'
          }"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activity_title" label="活动标题" width="300" align="center"></el-table-column>
      <el-table-column label="已报名" align="center">
        <template slot-scope="scope">
          <div>
            <div
              v-if="scope.row.states == 4"
            >{{scope.row.signCount}}人（还差{{scope.row.participate_min - scope.row.signCount}}人成团）</div>
            <div v-else>{{scope.row.signCount}}</div>
          </div>
        </template>
      </el-table-column>
<el-table-column label="分成比例" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.service_commission}}%</div>
        </template>
</el-table-column>
      
      <el-table-column label="活动开始时间" width="200" align="center">
        <template slot-scope="scope">
          <div>{{setDate(scope.row.activity_time)}} {{setTime(scope.row.activity_time)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center">
        <template slot-scope="scope">
          <div v-if=" scope.row.states== 1">待合作</div>
          <div v-if=" scope.row.states== 2">待审核</div>
          <div v-if=" scope.row.states== 3">已驳回 驳回原因：{{ scope.row.reject }}</div>
          <div v-if=" scope.row.states== 4">待报名</div>
          <div v-if=" scope.row.states== 5">已成团</div>
          <div v-if=" scope.row.states== 6">待签到</div>
          <div v-if=" scope.row.states== 7">已结束</div>
          <div v-if=" scope.row.states== 8">已关闭</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div>
                  <el-button @click="queryDetail( scope.row.id)" type="primary" size="mini" round >查看详情</el-button>
                </div>
                <div v-if="scope.row.states == 4 || scope.row.states == 5 || scope.row.states == 6 || scope.row.states == 7" >
                  <el-button @click="getErCode(scope.row.id)" type="primary" size="mini" round >推广二维码</el-button>
                </div>
                <div v-if="scope.row.states == 3">
                  <el-button @click="editAc(scope.row.id)" type="primary" size="mini" round >修改</el-button>
                </div>
                <div v-if="scope.row.states == 7">
                  <el-button @click="addAgain(scope.row.id)" type="primary" size="mini" round >再次创建活动</el-button>
                </div>
              </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :total="params.total"
      background
      style="text-align:center;margin:20px auto;"
      layout="prev, pager, next">
    </el-pagination>

  </div>
</template>
<script>
  import qs from 'qs' // 将请求转换成form 表单提交形式'
  export default {
    data() {
      return {
        loading: false,
        params: {
          page: 1,
          limit: 10,
          keyWord: "",
          startTime: '',
          endTime: '',
          states: '',
          total:0,
          serviceId: this.$store.state.userId
        },
        changeStates: '',
        states: 0,
        acList: [],
        src: ''
      };
    },
    created(){
    },
    methods: {
      /**
       * 分页
       */
      handleCurrentChange: function (index) {
        let that = this
        that.params.page = index
        that.getAcList()
      },
      /**
     * 再次创建活动
     */
    addAgain: function ( id ) {
      this.$router.push({
        path:'/main/addAc',
        query: {
          p: this.encodeJson({
            activityId: id,
            again:true
          })
        }
      })
    },
      /**
       * 修改活动
       */
      editAc: function(id) {
        this.$router.push({
          path: '/main/addAc',
          query: {
            p: this.encodeJson ({
              activityId: id,
              again:false
            })
          }
        })
      },
      /**
       * 获取二维码
       */
      getErCode: function(id) {
        let that = this
        this.$alert(`<img src="${that.$store.state.url}/activity/getQrCode?id=${id}&userId=${that.$cookie.get('serviceId')}">`, '二维码', {
          dangerouslyUseHTMLString: true
        });
      },
      /**
       *  查询活动列表
       */
      getAcList: function(num) {
        this.loading = true;
        let that = this;
        that.params.states = num
        that.states = num
        if (num == 0) {
          that.params.states = ''
        }
        that.axios({
          method: 'post',
          url: `activity/selectList`,
          data: qs.stringify(that.params)
        }).then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.acList = res.data.data
            that.params.total = res.data.count
          }
        })
      },
      /**
       * 活动详情
       */
      queryDetail: function(id) {
        this.$router.push({
          path: '/main/activityDetail',
          query: {
            // id: id
            p: this.encodeJson({
              activityId: id
            })
          }
        })
      },
      /**
       * 根据时间毫秒数 返回年月日
       */
      setDate: function(str) {
        let times = new Date(str)
        return `${times.getFullYear()}-${times.getMonth()+1 < 10 ?'0' + (times.getMonth() + 1) : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
      },
      /**
       * 根据时间毫秒数 返回时分秒
       */
      setTime: function(str) {
        let times = new Date(str)
        return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
      },
    },
    mounted() {
      this.getAcList(0)
    }
  };
</script>
<style scoped>
  .titles {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  .sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
}
.sel input {
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}
.sel-btn {
  color: #fff;
  width: 80px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
  margin-left: 37px;
  display: inline-block;
  font-size: 14px;
}
.sel select {
  width: 200px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
  margin-left: 17px;
  padding-left: 20px;
}
@media screen and (max-width: 1400px) {
  .sel input {
    width: 180px;
    margin: 0px;
  }
  .sel select {
    width: 180px;
    margin: 0px;
  }
  .sel-btn {
    margin: 0px;
  }
}

.show-menu {
  color: #4B74FF;
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
 
 .ac-tabs {
  /* width: 1520px; */
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
  display: flex;
}
.ac-tabs > div {
  cursor: pointer;
  flex: 1;
}
.ac-title {
  line-height: 38px;
  box-sizing: border-box;
  /* margin-left: 100px; */
}
.ac-title-active {
  border-bottom: 2px solid #4b74ff;
  color: #4b74ff;
}
.ac-title:first-child {
  margin-left: 0;
}
  .table {
    /* margin-left: 13px; */
    /* width: 1490px; */
  }
  .thead {
    background: #e0eefe;
    border: 1px solid #dddddd;
    /* width: 1490px; */
    height: 67px;
    line-height: 67px;
    font-size: 20px;
    text-align: center;
    margin-top: 24px;
    box-sizing:border-box;
  }
  .thead>div {
    float: left;
    height: 67px;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid #ddd;
    box-sizing:border-box;
  }
  .tbody {
    border: 1px solid #dddddd;
    box-sizing:border-box;
    /* width: 1490px; */
    border-top: 0px;
    height: 161px;
    overflow: hidden;
  }
  .tbody>div {
    float: left;
    height: 161px;
    /* line-height: 161px; */
    text-align: center;
    font-size: 18px;
    color: #4a4a4a;
    border-right: 1px solid #ddd;
    box-sizing:border-box;
    display: flex;
    justify-content:center;
    align-items:Center;
  }
  .tbody>.ac-ybm {
    color: #fe0000;
  }
  .tbody .tbody .ac-bt {
    line-height: 25px;
    box-sizing: border-box;
    padding: 0 18px 0 18px;
    text-align: left;
    font-weight: bold;
    box-sizing: border-box;
    width: 100%;
  }
  .tbody .ac-jzdate {
    line-height: 25px;
    /* padding-top: 60px; */
    /* height: 101px; */
  }
  .tbody .ac-ctrl {
    color: #4B74FF;
    border-right: 0px;
    cursor: pointer;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
  .tbody .ac-ctrl>div {
    text-align: center;
    font-weight: bold;
    background: #4B74FF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.50);
    border-radius: 2px;
    width: 109px;
    height: 35px;
    font-size: 14px;
    color: #ffffff;
    line-height: 35px;
    margin: 5px auto;
  }
  .day,
  .time {
    height: 25px;
    line-height: 25px;
  }
  .ac-poster {
    /* width: 189px; */
    width: 14%;
  }
  .ac-poster img {
    /* padding-top: 40px; */
    width: 135px;
    height: 85px;
    display: inline-block;
  }
  .ac-bt {
    /* width: 242px; */
    width: 14%;
  }
  .ac-ybm {
    /* width: 189px; */
    width: 14%;
  }
  .ac-jzdate {
    /* width: 224px; */
    width: 14%;
  }
  .ac-state {
    /* width: 219px; */
    width: 14%;
  }
  .ac-ctrl {
    /* width: 198px; */
    width: 16%;
  }
  .clear {
    clear: both;
  }
</style>
